<template>
  <div>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">【题型】:{{tixinObj.label}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">【编号】:{{tikuData.id}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">【难度】:{{nandu.label}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">【标签】:{{tikuData.tags}}</div></el-col>
    </el-row><br>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">【学科】:{{tikuData.subjectName}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">【目录】:{{tikuData.directoryName}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">【方向】:{{tikuData.direction}}</div></el-col>
    </el-row>
    <hr>
    <el-row><el-col :span="24"><div class="grid-content bg-purple">【题干】:</div></el-col></el-row>
    <el-row><el-col :span="24" v-html="tikuData.question" /></el-row>
    <el-row><el-col :span="24">{{tixinObj.label}}题 选项：（以下选中的选项为正确答案）</el-col></el-row>
    <div v-for="item in tikuData.options" :key="item.id">
      <el-radio-group v-model="item.isRight">
        <el-radio :label="1" v-if="tixinObj.label==='单选'">{{item.code}}:{{item.title}}</el-radio>
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label='item.isRight' v-if="tixinObj.label==='多选'">{{item.code}}:{{item.title}}</el-checkbox>
        </el-checkbox-group>
      </el-radio-group>
    </div>
    <hr>
    <el-row><el-col :span="24">【参考答案】：  <el-button type="danger" @click="videoDialog=true">视频答案预览</el-button></el-col></el-row>
    <br>
    <div v-if="videoDialog">
      <video :src="tikuData.videoURL" controls width="300px" class="video" ref="Video"></video>
    </div>
    <hr>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple">【答案解析】:{{tikuData.remarks}}</div></el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple">【题目备注】:{{tikuData.remarks}}</div></el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('close')">关 闭</el-button>
    </span>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: {
    timudata: {
      type: Object,
      required: true
    },
    questionType: {
      type: Array,
      required: true
    },
    difficulty: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      tikuData: {}, // 题目预览数据
      tixinObj: {}, // 题型枚举
      nandu: {}, // 难度枚举
      checkList: [1],
      videoDialog: false
    }
  },
  created () {
    this.clickdialog()
  },
  methods: {
    async clickdialog () {
      const { data } = await detail(this.timudata)
      // console.log(data)
      this.tikuData = data
      this.meiju()
    },
    // 枚举转换
    meiju () {
      const obj = this.questionType.find(item => item.value === +this.tikuData.questionType)
      this.tixinObj = obj
      const newNandu = this.difficulty.find(item => item.value === +this.tikuData.difficulty)
      this.nandu = newNandu
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>
